import React from 'react'
// ===================================================================== Temp
import SearchForm from '#cpt/temp/SearchForm'
import Table from '#cpt/temp/Table'
import Controls from '#cpt/temp/Controls'
import TableControls from '#cpt/temp/TableControls'
import AddEditModal from '#cpt/temp/AddEditModal'
import Confirm from '#cpt/temp/Confirm'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== $Lazy
const Page 				= $Lazy.load(()=>import('#tp/page/page-container'))
const $cache 			= $Lazy.file(()=>import('#private/cache-api'))
const ProjectTable 		= $Lazy.state(()=>import('./cpt/project-table'))
const HospitalTable 		= $Lazy.state(()=>import('./cpt/hospital-table'))
// ===================================================================== data
const activityStatus = [{ name:'已开始', value:'1' },{ name:'已审核', value:'0' },{ name:'未审核', value:'-1' }]
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
		// 搜索表单列表
		forms : [
			{ label: '状态',		name: 'enabled',	type:'select',	data:activityStatus },
			{ label: '活动名称',		name: 'act_name',		idStr:'uuid'},
			{ label: '活动内容',		name: 'act_content', 	idStr:'uuid'},
			{ label: '时间',		names: ['start_at','end_at'],	type: 'date-range' },
		],
		// 提交表单列表
		formData : [
			{ label: '活动名称',		name: 'act_name', 			full:true, 	required:true},
			{ label: '开始时间',		name: 'start_at',			full:true,	required:true,	type: 'date-time' },
			{ label: '结束时间',		name: 'end_at',				full:true,	required:true,	type: 'date-time' },
			{ label: '活动类型',		name: 'act_type', 			full:true,	required:true,	type:'select',	idStr:'code',	value: '90201',
				onValue: ({value}) => this.actType(value)
			},
			// 限时折扣价 90201
			{ label: '折扣类型',		name: 'discount_type', 	half:true,	type: 'radio',	value:'90302',	idStr:'code',
				onValue: ({value,formData}) => {
					if(!$fn.isEmpty(value)){
						if (value === '90302'){
							$fn.hideRows(formData,['discount_rate'], true)
							$fn.hideRows(formData,['discount_price'], false)
						}else if (value === '90301'){
							$fn.hideRows(formData,['discount_price'], true)
							$fn.hideRows(formData,['discount_rate'], false)
						}
						this.setState({formData})
					}
				}
			},
			{ label: '折扣价',		name: 'discount_price', 	full:true,	required:true },
			{ label: '折扣率',		name: 'discount_rate', 		full:true,	required:true,	hide:true },
			// 项目打包价 90202
			{ label: '项目打包总价',	name: 'kind_pack_price', 	full:true,	required:true,	hide:true },
			// 人数满员减金额 90203
			{ label: '人数',		name: 'user_total', 		full:true,	required:true,	hide:true },
			{ label: '减金额',		name: 'user_dis_price', 	full:true,	required:true,	hide:true },
			// 满金额减费用  90204
			{ label: '消费金额',		name: 'price_total', 		full:true,	required:true,	hide:true},
			{ label: '减金额',		name: 'price_dis_price', 	full:true,	required:true,	hide:true },
		]
	}
	
	componentDidMount(){
		if(window.isInit){
			this.fetch()
		}else{
			setTimeout(()=>this.setState({}),0)
		}
	}
	
	// 弹窗获取下拉数据
	getModalSelect = async () => {
		const { formData } = this.state
		$cache.then( async f => {
			// 容器类型
			await $fn.setRow( formData, 'act_type', await f.getDicCache({ code:90200 }) )
			// 折扣类型
			await $fn.setRow( formData, 'discount_type', await f.getDicCache({ code:90300 }) )
			this.setState({ formData })
		})
	}
	
	// paging
	fetch = () => $fn.fetch.call(this,'act-conf-marketing/index')
	
	// 活动类型
	actType = (value, discount_type) => {
		const { formData } = this.state
		if(value){
			switch (value) {
				case '90201':	// 限时折扣价
					if (discount_type === '90301'){
						$fn.hideRows(formData,['kind_pack_price', 'user_total','user_dis_price', 'price_total','price_dis_price','discount_price'], true)
						$fn.hideRows(formData,['discount_type','discount_rate'], false)
					}else {
						$fn.hideRows(formData,['kind_pack_price', 'user_total','user_dis_price', 'price_total','price_dis_price','discount_rate'], true)
						$fn.hideRows(formData,['discount_type','discount_price'], false)
					}
					break;
				case '90202':	// 项目打包价
					$fn.hideRows(formData,['discount_price', 'discount_rate', 'discount_type', 'user_total','user_dis_price', 'price_total','price_dis_price'], true)
					$fn.hideRows(formData,['kind_pack_price'], false)
					break;
				case '90203':	// 人数满员减金额
					$fn.hideRows(formData,['kind_pack_price','discount_price', 'discount_rate', 'discount_type', 'price_total','price_dis_price'], true)
					$fn.hideRows(formData,['user_total','user_dis_price'], false)
					break;
				case '90204':	// 满金额减费用
					$fn.hideRows(formData,['kind_pack_price', 'user_total','user_dis_price', 'discount_price', 'discount_rate','discount_type'], true)
					$fn.hideRows(formData,['price_total','price_dis_price'], false)
					break;
				default:
					break;
			}
			this.setState({formData})
		}
	}
	
	// 表单
	cols = [
		{ title: '开始时间', 	dataIndex: 'start_at', 			...$fn.table.time },
		{ title: '结束时间', 	dataIndex: 'end_at', 			...$fn.table.time },
		{ title: '活动名称', 	dataIndex: 'act_name', 			width:200 },
		{ title: '活动内容', 	dataIndex: 'act_content', 		width:200 },
		{ title: '状态', 		dataIndex: 'enabled',  			...$fn.table.status,	render: text => $fn.getState(activityStatus,text) },
		{ title: '操作人', 		dataIndex: 'op_user',  			...$fn.table.name},
		{ title: '审核人', 		dataIndex: 'audit_user',  		...$fn.table.name},
		{ title: '审核时间', 	dataIndex: 'audit_at',  		...$fn.table.time },
		{ title: '创建时间', 	dataIndex: 'created_at',  		...$fn.table.time },
		TableControls.controls.call(this,{ width: 110 })
	]
	
	// 表格操作按钮
	table_controls = (text,{uuid, enabled}) => {
		return [
			TableControls.edit.call(this, 'act-conf-marketing/info', { uuid },{
				click: this.getModalSelect,
				load: ({ act_type,discount_type }) => this.actType(act_type,discount_type)
			}),		// 编辑
			+enabled === -1 ? Confirm.call(this, '审核', 'act-conf-marketing/wait', { param: [uuid], idStr:'uuids' }) : null,
			+enabled === 0 ? Confirm.call(this, '开始', 'act-conf-marketing/audit', { param: [uuid], idStr:'uuids' }) : null,
			+enabled === 1 ? Confirm.call(this, '停止', 'act-conf-marketing/stop', { param: [uuid], idStr:'uuids' }) : null,
		]
	}
	
	// 操作按钮
	controls = () => {
		return [
			Confirm.call(this, '审核', 'act-conf-marketing/wait', { idStr:'uuids', isKeys:true }),
			Confirm.call(this, '开始', 'act-conf-marketing/audit', { idStr:'uuids', isKeys:true }),
			Confirm.call(this, '停止', 'act-conf-marketing/stop', { idStr:'uuids', isKeys:true })
		]
	}
	
	expands = () => {
		return [
			Controls.add.call(this,{click:() => {
				const { formData } = this.state
				this.getModalSelect()
				this.formRef.setValue({'act_type': '90201', 'discount_type':'90302'})
				$fn.hideRows(formData,['kind_pack_price', 'user_total','user_dis_price', 'price_total','price_dis_price', 'discount_rate'], true)
				$fn.hideRows(formData,['discount_price', 'discount_type'], false)
				this.setState({formData})
			}}),			// 新增
			Controls.click.call(this,'搜索',()=> this.fetch(),{ code: 'F4' }),
		]
	}
	
	render(){
		return (
			<>
				<Page title='营销活动' nobc controls={this.controls()}>
					<section className='ex fx'>
						<div className='h fv ex bcf mr5 ' style={{width:'50%'}}>
							{/* 搜索 */}
							{ SearchForm.call(this, { noRefresh:true, noReset:true, controls: this.expands() }) }
							{/* 表格 */}
							{ Table.call(this, { isInit: window.isInit, onRow: ({uuid}) => {
								this.hospitalTableRef.getHospital(uuid)
								this.projectTableRef.getProject(uuid)
							} } ) }
						</div>
						<div className='h fv ex' style={{width:'50%'}}  >
							<div className='fv ex bcf mb5 ' style={{height:'50%'}} >
								<HospitalTable onRef={ref=>this.hospitalTableRef=ref} />
							</div>
							<div className='fv ex bcf' style={{height:'50%'}}  >
								<ProjectTable onRef={ref=>this.projectTableRef=ref} />
							</div>
						</div>
					</section>
				</Page>
				{/* 添加 编辑 */}
				{AddEditModal.call(this,{title:'活动', labelWidth:'s7', width:700, api:'act-conf-marketing/add', editApi:'act-conf-marketing/edit' })}
			</>
		)
	}
}

export default Index
 // 根据设计页面重新调整界面 2021-10-18 --马婷 